<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        body {
            margin: 0
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
            background: #f5f5f5
        }

        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        #pro1-swiper .swiper-slide {
            height: 10rem;
        }

        .aui-col-xs-3 img {
            width: 40%;
            display: block;
            margin: auto;
        }

        .dhq {
            background: #fff;
            padding: 1rem 0.75rem;
        }

        .dhq_tit h3 {
            font-size: 1rem;
            color: #333;
        }

        .dhq_tit h5 {
            font-size: 0.6rem;
            color: #999;
        }

        .dhq_tit h4 {
            font-size: 0.7rem;
            color: #666;
            margin-top: 0.5rem;
        }

        .dhq_img {
            margin: 1rem 0;
            padding: 0 10%;
        }

        .dhq_img img {
            width: 100%;
        }

        .dhq_text h4 {
            font-size: 0.65rem;
        }

        .dhq_text h5 {
            font-size: 0.7rem;
            line-height: 1.6rem;
            color: #f23030;
        }

        .near_price {
            font-size: 1rem;
            color: #f23030;
        }
        .near_price a{
          font-size: 0.6rem;
          color: #f23030;
          margin-top: 0.35rem;
        }
        .near_price i {
            font-size: 0.6rem;
            line-height: 0.6rem;
            height: 0.6rem;
            color: #666;
            font-style: normal;
            margin-left: 0.1rem;
            margin-top: 0.55rem;
        }
        .aui-info-item .near_sales{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.6rem;
          color: #ff9932;
            width: 3.8rem;
            height: 0.95rem;
            line-height: 0.95rem;
            text-align: center;
            border: 1px solid #ff9932;
            border-radius: 0.9rem;
            margin-left: 0.9rem;
            letter-spacing: 1px;
        }

        .aui-list .aui-list-item-text.near_jj {
            height: 1rem;
            line-height: 1rem;
            overflow: hidden;
        }

        .aui-list .aui-list-item-text.near_pj {
            overflow: hidden;
            -webkit-box-pack: initial;
            -webkit-justify-content: initial;
            justify-content: initial;
            margin-bottom: 0.4rem;
        }

        .aui-list .aui-list-item-text.near_pj img {
            width: 0.6rem;
            margin-right: 0.2rem;
            display: inline-block;
        }

        .near {
            background: #fff
        }

        .aui-tab-item.aui-active {
            color: #ff8000;
            border-bottom: 2px solid transparent;
        }

        .aui-tab-item {
            color: #999;
        }

        .aui-tab-item.up_down::before {
            content: '';
            border: 4px solid transparent;
            border-bottom: 5px solid #999;
            position: absolute;
            left: 72%;
            top: 0;
            bottom: 0px;
            margin: auto;
            height: 0;
            width: 0;
            transform: translateY(-60%);
        }

        .aui-tab-item.up_down::after {
            content: '';
            border: 4px solid transparent;
            border-top: 5px solid #999;
            position: absolute;
            left: 72%;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 0;
            width: 0;
            transform: translateY(60%);
        }

        .aui-tab-item.aui-active.up_down.up::before {
            border-bottom-color: #ff8000;
        }

        .aui-tab-item.aui-active.up_down.down::after {
            border-top-color: #ff8000;
        }

        #tab {
            z-index: 1
        }

        .aui-refresh-content {
            min-height: calc(100vh - 12.4rem)
        }

        .swiper-container2 {
            width: 100%;
            height: 2.2rem;
            position: relative;
            overflow: hidden;
            background: #fff;
            border-bottom: none!important;
            z-index: 999;
            padding-left: 0.75rem;
        }

        .btm_line {
            border-bottom: 1px solid #eee!important;
        }

        .swiper-container2 .swiper-slide {
          display: inline-block;
          width ：20%;
            text-align: left;
            font-size: 0.6rem;
            line-height: 2.2rem;
        }

        .swiper-container2 .swiper-slide-active {
            border-bottom: none!important;
        }

        .swiper-container2 span {
            display: initial;
            padding: 0.1rem 0.2rem;
            line-height: 1;
            font-size: 0.7rem;
            color: #999999;
        }

        .swiper-container2 .list_title.active {
            /*border-bottom: 1px solid red!important;*/
            /*font-weight: bold;*/
        }

        .swiper-container2 .list_title.active span {
            background: #f23030;
            display: initial;
            border-radius: 1rem;
            padding: 0.1rem 0.5rem;
            line-height: 0.9rem;
            color: #FFF;
            font-weight: 600;
        }
        .aui-list .aui-list-item-title{
          margin-bottom: 0.4rem;
        }

    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div id="pro1-swiper" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in banner" :style="'background:url('+item.index_pic+') no-repeat center; background-size:cover'" :data-id="item.store_id"></div>
            </div>
        </div>
        <div class="near">

            <div class="swiper-container2" :class="{'btm_line':test==0}">
                <div class="swiper-wrapper">
                    <div class="swiper-slide list_title active" @click="change_state(0,'')"><span>全部</span></div>
                    <div class="swiper-slide list_title" v-for="(fl,fl_index) in fl_info" @click="change_state(fl_index+1,fl.scate_id)"><span>{{fl.classname}}</span></div>
                </div>
            </div>

            <!-- <div class="aui-tab" id="tab">
                <div class="aui-tab-item aui-active">综合</div>
                <div class="aui-tab-item">
                    <div></div>销量</div>
                <div class="aui-tab-item">评分</div>
                <div class="aui-tab-item up_down">价格</div>
                <div class="aui-tab-item up_down">距离</div>
            </div> -->


            <div class="aui-refresh-content">
                <div class="near_list" v-if="goodsList.length > 0">
                    <div class="aui-content ">
                        <ul class="aui-list aui-media-list">
                            <li class="aui-list-item" v-for="item in goodsList" @click="openShop(item.name, item.store_id)">
                                <div class="aui-media-list-item-inner">
                                    <div class="aui-list-item-media">
                                        <div :style="'background: url('+item.logo+') no-repeat center/cover;height: 4rem;width:100%'"></div>
                                    </div>
                                    <div class="aui-list-item-inner">
                                        <div class="aui-list-item-text">
                                            <div class="aui-list-item-title">{{item.name}}</div>
                                            <div class="aui-list-item-right">{{item.distance}}</div>
                                        </div>
                                        <div class="aui-list-item-text near_pj" v-if="(item.fraction - 0) >= 0">
                                            <img src="../../image/two/star-on.png" alt="" v-for="n in (item.fraction - 0)">
                                            <img src="../../image/two/star-off.png" alt="" v-for="n in (5 - (item.fraction - 0))">{{item.fraction}}
                                        </div>
                                        <div class="aui-info aui-margin-t-5" style="padding:0">
                                            <div class="aui-info-item">
                                                <span class="near_price"><a>￥</a>{{item.price}} <i>起</i></span>
                                                <span class="near_sales">月销{{item.sales}}笔</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript">
    function goback() {
        api.closeWin()
    }
    apiready = function() {
        // alert(api.pageParam.id)
        var app = new Vue({
            el: '#app',
            data: {
                banner: [],
                goodsList: [],
                page: 1,
                totalpage: 1,
                sort: 1,
                fl_info: [],
                scate_id: api.pageParam.id,
                test: 0
            },
            created: function() {
                var $_this = this;
                api.showProgress({
                    title: '努力加载中...',
                    text: '先喝杯茶...',
                    modal: false
                });
                api.ajax({
                    url: window.Url.Freestorecate_getStoreCate,
                    method: 'post',
                    data: {
                        values: {
                            scate_id: api.pageParam.id,
                            token: $api.getStorage('token')
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        $_this.banner = ret.data
                        $_this.$nextTick(function() {
                            var bannerSwiper = new Swiper('#pro1-swiper', {
                                autoplay: 3000,
                                loop: true
                            })

                            setTimeout(function() {
                                var swiper = new Swiper('.swiper-container2', {
                                    slidesPerView: 5,
                                    spaceBetween: 10,
                                    freeMode: true
                                });
                            }, 100)

                            $('#pro1-swiper .swiper-slide').click(function() {

                                var click_id = $(this).attr('data-id');
                                if (click_id != 0) {
                                    $_this.openWindow('', click_id)
                                } else {
                                    api.toast({
                                        msg: '无对应商品',
                                        duration: 2000,
                                        location: 'bottom'
                                    });

                                }

                            })
                        })

                        // console.log(JSON.stringify(ret));
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })



                var scroll = new auiScroll({
                    listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                    distance: 40 //判断到达底部的距离，isToBottom为true
                }, function(ret) {
                    if (ret.isToBottom) {
                        $_this.page++
                            if ($_this.page > $_this.totalpage) {
                                $_this.page = $_this.totalpage
                                return
                            }
                        api.ajax({
                            url: window.Url.Freelocal_getList,
                            timeout: 300,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token'),
                                    page: $_this.page,
                                    province: $api.getStorage('province'),
                                    city: $api.getStorage('city'),
                                    sort: $_this.sort,
                                    longitude: $api.getStorage('longitude'),
                                    latitude: $api.getStorage('latitude'),
                                    scate_id: $_this.scate_id
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                $_this.goodsList = $_this.goodsList.concat(ret.data.list)

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }

                })

            },
            methods: {
                openWindow: function(name, id) {
                    // all_open_login(function() {
                    api.openWin({
                        name: 'commodity',
                        url: '../one_frame/commodity.html',
                        pageParam: {
                            name: name,
                            id: id
                        }
                    });
                    // })
                },
                openShop: function(name, id) {
                    api.openWin({
                        name: 'shop_inner',
                        url: './two_frame_header.html',
                        pageParam: {
                            type: 'shop_inner',
                            name: name,
                            id: id
                        }
                    })
                },
                to_xs: function() {
                    var $_this = this;
                    var pullRefresh = new auiPullToRefresh({
                        container: document.querySelector('.aui-refresh-content'),
                        triggerDistance: 100
                    }, function(ret) {
                        if (ret.status == "success") {
                            api.ajax({
                                url: window.Url.Freelocal_getList,
                                method: 'post',
                                data: {
                                    values: {
                                        token: $api.getStorage('token'),
                                        page: $_this.page,
                                        province: $api.getStorage('province'),
                                        city: $api.getStorage('city'),
                                        sort: $_this.sort,
                                        longitude: $api.getStorage('longitude'),
                                        latitude: $api.getStorage('latitude'),
                                        scate_id: $_this.scate_id
                                    }
                                }
                            }, function(ret, err) {
                                if (ret) {
                                    setTimeout(function() {
                                        if (ret.re == 1) {
                                            $_this.goodsList = ret.data.list
                                            $_this.totalpage = ret.data.sum_page
                                        } else {
                                            api.toast({
                                                msg: ret.info,
                                                duration: 2000,
                                                location: 'bottom'
                                            });

                                        }
                                        pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                                    }, 500)
                                } else {
                                    api.alert({
                                        msg: JSON.stringify(err)
                                    });
                                }
                            })

                        }
                    })
                },
                // 获取分类
                get_fx: function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Freestorecate_index,
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                cateid: api.pageParam.id
                            }
                        },
                        method: 'post'
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.re == 1) {
                                $_this.fl_info = ret.data.scatelist;
                                console.log(JSON.stringify($_this.fl_info));
                            }

                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                },
                // 点击分类标题
                change_state: function(fl_index, fl_id) {
                    var $_this = this;
                    // alert(fl_id)
                    $('.list_title').removeClass('active');
                    $('.list_title').eq(fl_index).addClass('active')

                    if (fl_index == 0) {
                        $_this.goodsList = [];
                        $_this.scate_id = api.pageParam.id;
                        $_this.get_fj_list();

                    } else {
                        $_this.goodsList = [];
                        $_this.scate_id = fl_id;
                        $_this.get_fj_list();
                    }


                },

                // 获取附近商品列表
                get_fj_list: function() {
                    var $_this = this;
                    $_this.goodsList = [];
                    api.ajax({
                        url: window.Url.Freelocal_getList,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                page: $_this.page,
                                province: $api.getStorage('province'),
                                city: $api.getStorage('city'),
                                sort: $_this.sort,
                                longitude: $api.getStorage('longitude'),
                                latitude: $api.getStorage('latitude'),
                                scate_id: $_this.scate_id
                            }
                        }
                    }, function(ret, err) {
                        console.log(JSON.stringify(ret));
                        if (ret) {
                            if (ret.re == 1) {
                                $_this.goodsList = ret.data.list
                                $_this.totalpage = ret.data.sum_page
                                $_this.test = 1;
                            } else {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                                $_this.test = 0;

                            }

                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                }
            },
            watch: {
                sort: function() {
                    var $_this = this
                    $_this.page = 1
                    api.ajax({
                        url: window.Url.Freelocal_getList,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                page: $_this.page,
                                province: $api.getStorage('province'),
                                city: $api.getStorage('city'),
                                sort: $_this.sort,
                                longitude: $api.getStorage('longitude'),
                                latitude: $api.getStorage('latitude')
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            $_this.goodsList = ret.data.list
                            $_this.totalpage = ret.data.sum_page

                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                }
            },
            mounted: function() {
                var $_this = this;
                $_this.get_fj_list()
                $_this.get_fx();
                api.hideProgress()
                var prevIndex = 1
                var tab = new auiTab({
                    element: document.getElementById("tab"),
                    repeatClick: true
                }, function(ret) {
                    if (ret.index == 1) {
                        $('.aui-tab-item').eq(3).removeClass('up, down')
                        $('.aui-tab-item').eq(4).removeClass('up, down')
                        $_this.sort = 1
                    } else if (ret.index == 2) {
                        $('.aui-tab-item').eq(3).removeClass('up, down')
                        $('.aui-tab-item').eq(4).removeClass('up, down')
                        $_this.sort = 2
                    } else if (ret.index == 3) {
                        $('.aui-tab-item').eq(3).removeClass('up, down')
                        $('.aui-tab-item').eq(4).removeClass('up, down')
                        $_this.sort = 3
                    } else if (ret.index == 4) {
                        $('.aui-tab-item').eq(4).removeClass('up, down')
                        if (prevIndex == ret.index) {
                            $('.aui-tab-item').eq(3).toggleClass('up')
                            $('.aui-tab-item').eq(3).toggleClass('down')
                            if ($('.aui-tab-item').eq(3).hasClass('up')) {
                                $_this.sort = 4
                            } else {
                                $_this.sort = 5
                            }
                        } else {
                            $('.aui-tab-item').eq(3).addClass('up')
                            $_this.sort = 4
                        }
                    } else if (ret.index == 5) {
                        $('.aui-tab-item').eq(3).removeClass('up, down')
                        if (prevIndex == ret.index) {
                            $('.aui-tab-item').eq(4).toggleClass('up')
                            $('.aui-tab-item').eq(4).toggleClass('down')
                            if ($('.aui-tab-item').eq(4).hasClass('up')) {
                                $_this.sort = 6
                            } else {
                                $_this.sort = 7
                            }
                        } else {
                            $('.aui-tab-item').eq(4).addClass('up')
                            $_this.sort = 6
                        }
                    }
                    prevIndex = ret.index
                });


                $_this.to_xs();
            }
        })
    }
</script>

</html>
